<template>
	<view>
		<view class="bgimg">
			<view class="title" style="padding-top:150rpx;">
				<view class="big-title">产品详情</view>
				<view class="small-title auto  textc"><view class="fs22">具体数据如下</view></view>
			</view>
			<!-- 资料标题 -->
			<view>
				<DetailsData
					:providing_company="dataInfo.providing_company"
					:company_name="dataInfo.company_name"
					:service_phone="dataInfo.service_phone"
					:yield_rate="dataInfo.yield_rate"
					:cycle="dataInfo.cycle"
					:title="dataInfo.title"
					:guarantee_bank="dataInfo.guarantee_bank"
					:scale_money="dataInfo.scale_money"
				></DetailsData>
			</view>
			<!-- 资料标题结束 -->

			<!-- 本产品亮点 -->
			<!-- 			<view class="mt20"><ProductHigh :dataList="dataInfo.dataList"></ProductHigh></view> -->
			<!-- 本产品亮点结束 -->

			<!-- 担保措施 -->
			<view><Measure :guarantee_measure_1="dataInfo.guarantee_measure_1"></Measure></view>
			<!-- 担保措施结束 -->
			<!-- 担保银行 -->
			<view><Bank :guarantee_bank="dataInfo.guarantee_bank"></Bank></view>
			<!-- 担保银行结束 -->
			<!-- 产品规模 -->
			<view><SharehOlder :scale_money="dataInfo.scale_money"></SharehOlder></view>
			<!-- 产品规模结束 -->
			<!-- 产品描述 -->
			<view><PayRule :desc="dataInfo.desc"></PayRule></view>
			<!-- 产品描述结束 -->

			<!--底部的按钮 -->
			<view class="button dflex jcsb pl30 pr30 fs32 alc">
				<view class="btn1" @click="handerCalculateIncome">计算收益</view>
				<view class="btn2" @click="handerSubscriptionReservation">预约认购</view>
			</view>

			<!--底部的按钮结束 -->
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
import { getGoodsInfo } from '@/utils/api.js';

let id = ref();
let arr = ref([]);
let dataInfo = ref({});
let payList = ref([]);
const getDetail = () => {
	getGoodsInfo({ goods_id: id.value }).then(res => {
		dataInfo.value = res.data;

		//本产品亮点
		// dataInfo.value.payList = payList.value;
		// if (dataInfo.value.highlight_name_1) {
		// 	dataInfo.value.dataList = [
		// 		{
		// 			id: 1,
		// 			title: dataInfo.value.highlight_name_1,
		// 			text: dataInfo.value.highlight_val_1
		// 		},
		// 		{
		// 			id: 2,
		// 			title: dataInfo.value.highlight_name_2,
		// 			text: dataInfo.value.highlight_val_2
		// 		},
		// 		{
		// 			id: 3,
		// 			title: dataInfo.value.highlight_name_3,
		// 			text: dataInfo.value.highlight_val_3
		// 		}
		// 	];
		// }

		// if (dataInfo.value.subscribe_process) {
		// 	dataInfo.value.payList.push({
		// 		id: 1,
		// 		text: '•  &nbsp;认购流程：' + dataInfo.value.subscribe_process
		// 	});
		// }
		// if (dataInfo.value.interest_date) {
		// 	dataInfo.value.payList.push({
		// 		id: 2,
		// 		text: '•  &nbsp;计息日期：' + dataInfo.value.interest_date
		// 	});
		// }
		// if (dataInfo.value.interest_payment_date) {
		// 	dataInfo.value.payList.push({
		// 		id: 3,
		// 		text: '•  &nbsp;付息日期：' + dataInfo.value.interest_payment_date
		// 	});
		// }
		// if (dataInfo.value.due_date) {
		// 	dataInfo.value.payList.push({
		// 		id: 4,
		// 		text: '•  &nbsp;到期日期：' + dataInfo.value.due_date
		// 	});
		// }
		// if (dataInfo.value.payment_method) {
		// 	dataInfo.value.payList.push({
		// 		id: 5,
		// 		text: '•  &nbsp;兑付方式：' + dataInfo.value.payment_method
		// 	});
		// }
		// if( dataInfo.value.payment_instructions){
		// 	dataInfo.value.payList.push(
		// 	{
		// 		id: 6,
		// 		text: '•  &nbsp;打款须知：' + dataInfo.value.payment_instructions
		// 	}
		// 	)
		// }

		//担保措施
		// dataInfo.value.warrantList = [
		// 	{
		// 		id: 1,
		// 		text: dataInfo.value.guarantee_measure_1
		// 	},
		// 	{
		// 		id: 2,
		// 		text: dataInfo.value.guarantee_measure_2
		// 	},
		// 	{
		// 		id: 3,
		// 		text: dataInfo.value.guarantee_measure_3
		// 	}
		// ];
	});
};
const handerCalculateIncome = () => {
	uni.navigateTo({
		url: '/pages/CalculateIncome/CalculateIncome'
	});
};
const handerSubscriptionReservation = () => {
	uni.navigateTo({
		url: '/pages/SubscriptionReservation/SubscriptionReservation'
	});
};
onLoad(options => {
	id.value = options.id;
	getDetail();
});
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
});
</script>

<style lang="scss">
.bgimg {
	background-image: url('../../static/bg666.png');
	background-repeat: no-repeat;
	background-size: 100%;
}
.title {
	text-align: center;
	.big-title {
		background: linear-gradient(180deg, #ffdd84 0%, #ff5337 100%);
		background-clip: text;
		color: transparent;
		font-weight: bold;
		transform: rotate(5deg);
		font-size: 71rpx;
		margin-left: 50rpx;
	}
	.small-title {
		width: 250rpx;
		height: 71rpx;
		background-image: url('../../static/small.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #75510a;
		line-height: 71rpx;
		& > view {
			transform: rotate(6deg);
		}
	}
}
.button {
	width: 750rpx;
	height: 120rpx;
	background: #ffffff;
	color: #fff;
	.btn1 {
		width: 277rpx;
		height: 84rpx;
		line-height: 84rpx;
		background: linear-gradient(180deg, #ffc6a6 0%, #ff8745 100%);
		border-radius: 15rpx;
		text-align: center;
		letter-spacing: 5rpx;
	}
	.btn2 {
		width: 398rpx;
		height: 84rpx;
		background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
		line-height: 84rpx;
		border-radius: 15rpx;
		text-align: center;
		letter-spacing: 5rpx;
	}
}
</style>
